<template>
  <div>
    <n-data-table :data="samples" :columns="columns" :row-key="(row) => row.sampleId"/>
  </div>
</template>

<script>
import {listSample} from "@api/sample";
import SampleDetail from "@component/common/SampleDetail";
import {NButton} from "naive-ui";
import { deleteSample } from "@api/sample";

export default {
  name: "SampleList",
  components: {SampleDetail},
  data () {
    return {
      samples: [],
      page: 1,
      pageSize: 15,
      columns: [
        {
          type: "expand",
          renderExpand: (row) => {
            return h(SampleDetail, {
              value: row
            });
          },
        },
        {
          title: "样本编号",
          key: "sampleId",
        },
        {
          title: "集合名称",
          key: "collectionName",
        },
        {
          title: "命名空间",
          key: "namespace",
        },
        {
          title: "操作",
          key: "action",
          width: 60,
          render: (row) => {
            console.log(row);
            return h('div', [
              h(NButton, {
                text: true,
                style: {
                  marginLeft: "5px",
                },
                type: "error",
                onClick: () => {
                  deleteSample(row.namespace, row.collectionName, row.sampleId).then((res) => {
                    this.load();
                  });
                },
              }, "删除"),
            ]);
          }
        }
      ],
    }
  },
  methods: {
    load () {
      listSample(this.page, this.pageSize).then((res) => {
        this.samples = res.data.data;
      })
    }
  },
  created() {
    this.load();
  }
}
</script>

<style scoped>

</style>
